<template>
  <!-- 头部区域 -->
  <van-nav-bar
    :title="`购物车(${goodsNum})`"
    left-text="返回"
    left-arrow
    @click-left="$router.go(-1)"
  />
  <!-- 购物车区域 -->
  <van-empty v-if="goodsList.length === 0" description="购物车暂无内容" />
  <div class="car-buy-list" v-else>
    <div class="car-buy-item" v-for="item in goodsList" :key="item.proid">
      <van-swipe-cell>
        <van-cell :border="false">
          <van-checkbox
            class="buy-item-checkbox"
            v-model="item.checked"
            icon-size="24px"
            @change="changeItem"
          ></van-checkbox>
          <div class="buy-item-right">
            <div class="item-right-img">
              <img class="right-img" :src="item.img" alt="" />
            </div>
            <div class="item-right-content">
              <div class="right-text">{{ item.proname }}</div>
              <div class="right-price">
                <div class="price-price">￥{{ item.originprice }}</div>
                <div class="price-num">
                  <van-stepper
                    v-model="item.goodsNum"
                    theme="round"
                    button-size="22"
                    disable-input
                    :name="item.proid"
                    @change="changeGoodsNum"
                  />
                </div>
              </div>
            </div>
          </div>
        </van-cell>
        <template #right>
          <van-button
            @click="delGoodsItem(item.proid)"
            square
            type="danger"
            text="删除"
          />
        </template>
      </van-swipe-cell>
    </div>
  </div>
  <van-divider class="car-divider">可能还想要</van-divider>
  <!-- 推荐商品区域 -->
  <van-list class="car-goods-list">
    <van-cell v-for="item in recommendGoodsList" :key="item.proid">
      <div class="car-goods-item">
        <div class="item-img">
          <img :src="item.img1" alt="" />
        </div>
        <div class="item-text">{{ item.proname }}</div>
        <div class="item-price">￥{{ item.originprice }}</div>
      </div>
    </van-cell>
  </van-list>
  <!-- 订单提交区域 -->
  <van-submit-bar
    :price="goodsTotalPrice"
    button-text="提交订单"
    @submit="onSubmit"
    class="dingdantijiao"
  >
    <van-checkbox @click="changeCheckAll" v-model="checkedAll"
      >全选</van-checkbox
    >
  </van-submit-bar>
</template>

<script lang="ts" setup>
import { useCarGoodsList } from "../hooks/carHook";

const {
  goodsNum,
  goodsList,
  recommendGoodsList,
  checkedAll,
  goodsTotalPrice,
  onSubmit,
  changeGoodsNum,
  changeCheckAll,
  changeItem,
  delGoodsItem,
} = useCarGoodsList();
</script>

<style lang="scss" scoped>
.car-divider {
  &::after,
  &::before {
    background-color: #23232382;
  }
}
.car-goods-list {
  display: flex;
  flex-flow: wrap;
  justify-content: space-evenly;
  background-color: rgba(75, 84, 75, 0.12);
  padding-bottom: 100px;
  .van-cell {
    width: 48%;
    margin: 10px 0;
    .car-goods-item {
      .item-img {
        img {
          display: block;
          width: 100%;
          height: 100%;
        }
      }
      .item-text {
        display: -webkit-box;
        text-overflow: ellipsis;
        text-align: left;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        word-break: break-all;
        color: #222;
        margin: 10px 0;
      }
      .item-price {
        text-align: left;
        font-weight: bold;
        color: rgb(227, 37, 28);
      }
    }
  }
}
.car-buy-list {
  .car-buy-item {
    border-bottom: 1px solid #23232326;
    &:nth-last-child(1) {
      border: none;
    }
    .van-swipe-cell {
      :deep(.van-swipe-cell__wrapper) {
        .van-cell {
          .van-cell__value {
            display: flex;
            .buy-item-checkbox {
              overflow: visible;
            }
            .buy-item-right {
              display: flex;
              margin-left: 40px;
              .item-right-img {
                height: 160px;
                width: 200px;
                margin-right: 30px;
                border-radius: 10px;
                overflow: hidden;
                .right-img {
                  width: 100%;
                  height: 100%;
                }
              }
              .item-right-content {
                .right-text {
                  display: -webkit-box;
                  text-overflow: ellipsis;
                  text-align: left;
                  overflow: hidden;
                  -webkit-box-orient: vertical;
                  -webkit-line-clamp: 2;
                  word-break: break-all;
                  font-size: 12px;
                  line-height: 30px;
                  color: #222;
                  margin-top: 10px;
                }
                .right-price {
                  display: flex;
                  justify-content: space-between;
                  margin-top: 50px;
                }
              }
            }
          }
        }
        .van-swipe-cell__right {
          .van-button {
            height: 100%;
          }
        }
      }
    }
  }
}
.dingdantijiao{
  height: 80px;
  :deep(van-submit-bar__bar){
    height: 50px;
    :deep(van-submit-bar__button--danger){
      height: 30px;
      width: 50px;
    }
  }
}
</style>
